<template>
  <div class="app">
    <TopNav></TopNav>
    <div class="left-div">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for='item of artData'>
          <div class="detail">{{item.detail}}</div>
        </swiper-slide>
        <div class="swiper-button-prev"></div><!--左箭头-->
        <div class="swiper-button-next"></div><!--右箭头-->
      </swiper>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
    <div class="right-div">
      <div class="right-top">
        <div class="top-title">随便看看</div>
        <div class="top-items">
          <el-col class="top-item" v-for="item of recommendData" :key="item.title" @click="clickDetail(item)" >
            <el-card shadow="hover">
              {{item.title}}
            </el-card>
          </el-col>
        </div>
      </div>
      <div class="right-bottom">
        <div class="bottom-title">风云榜</div>
        <ul class="ul">
          <li class="li" v-for="item of rankingData">
            <span class="li-span">{{item.id}}</span>
            <a class="li-a">{{item.message}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import TopNav from '@/components/top-nav'
  // var mySwiper = new Swiper('.swiper', {
  //   navigation: {
  //     nextEl: '.swiper-button-next',
  //     prevEl: '.swiper-button-prev',
  //   }
  // });
  export default {
    name: 'page-list',
    components: {
      TopNav
    },
    data() {
      return {
        msg: 'msg',
        artData: [{
          title: 'title1',
          detail: '\n' +
          '\tNational news network Globo reported Bolsonaro required emergency surgery, while his son, Flavio, a candidate for the Brazilian senate, originally said on Twitter that his father\'s wounds were "only superficial."'
        }, {
          title: 'title2',
          detail: '\n' + '详细的内容2' + '\n' + '哈哈哈哈哈哈哈'
        }, {
          title: 'title3',
          detail: '详细的内容3'
        }, {
          title: 'title3',
          detail: '详细的内容3'
        }],
        recommendData: [{
          title: 'I'
        }, {
          title: 'Love'
        }, {
          title: 'YOU'
        }, {
          title: 'Love'
        }, {
          title: 'YOU'
        }, {
          title: 'Love'
        }, {
          title: 'YOU'
        }, {
          title: 'Love'
        }, {
          title: 'YOU'
        }],
        rankingData: [{
          message: '我就是第一啊',
          id: '1'
        },{
          message: '我就是第一啊',
          id: '2'
        },{
          message: '我就是第一啊',
          id: '3'
        },{
          message: '我就是第一啊',
          id: '4'
        },{
          message: '我就是第一啊',
          id: '5'
        },{
          message: '我就是第一啊',
          id: '6'
        },{
          message: '我就是第一啊',
          id: '7'
        },{
          message: '我就是第一啊',
          id: '8'
        },{
          message: '我就是第一啊',
          id: '9'
        },{
          message: '我就是第一啊',
          id: '10'
        },]
      }
    },
    methods: {
      testFunc: function () {
        console.log('testFunc')
      },
      clickDetail (item) {

      }
    },
    created() {
      document.title = "template"
    }
  }
</script>

<style scoped type="text/stylus" lang="stylus">
.app {
  height: 100%
  .left-div {
    float left
    width: 75%
    text-align: center
    .detail {
      height: 100%
      background: red
      font-size: 80px
    }
    .pagination {
      width:auto
      display:inline-block !important
      display:inline
      margin: 0 auto
    }
  }
  .right-div {
    float right
    width: 25%
    height: 100%
    padding-left: 20px
    .right-top {
      .top-title {
        font-size: 30px
        padding: 12px
      }
      .top-items {
        overflow: hidden
        .top-item {
          width: 30%
          height: 0
          padding-bottom: 30%
          margin: 1%
          float: left
          background:url('http://pic.qiantucdn.com/58pic/18/01/55/42358PIC4Bt_1024.jpg')
        }
      }
    }
    .right-bottom {
      .bottom-title {
        font-size: 30px
        padding: 12px
      }
      .ul {
        .li{
          padding: 5px 0
          .li-span {
            width: 15px
            /*height: 15px*/
            border-radius: 2px
            display:block
            text-align: center
            color: white
            background: #92BBF1
            float: left
            padding: 0
          }
          .li-a {
            padding-left: 10px
          }
        }
        .li:first-child {
          .li-span {
            background: #EF494F
          }
        }
        .li:nth-child(2) {
          .li-span{
            background: #FB8556
          }
        }
        .li:nth-child(3) {
          .li-span {
            background: #FBAA50
          }
        }
      }
    }
  }
}
</style>
